<template>
  <view>
    <view class="px-3 pt-3">
      <view class="text-right">
        <text class="border-1 border-solid border-#999999 text-xs p-1 rounded"
              @click="goPage('/pages_sub/balance/balanceList')">消费明细
        </text>
      </view>
      <view class=" rounded p-4 mt-4 bg" :style="{ color: 'white'}">
        <view class="text-lg font-bold text-white">储值卡</view>
        <view class="px-6 mt-4 pb-4">
          <u-divider bg-color="transparent" color="white" border-color="white">
            <text>账户余额（元）</text>
          </u-divider>
          <view class="text-center text-lg text-white mt-2">{{vuex_user.money}}</view>
        </view>
      </view>
      <view>
        <view class="title">充值金额</view>
        <view class="flex items-center" style="margin-top: 42rpx">
          <text style="font-size: 40rpx;margin: 0 17rpx">¥</text><u-input :custom-style="{background:'#EEEEEE',color:'#666666',padding:'10rpx',fontSize:'40rpx',borderRadius:'10rpx'}" v-model="price" placeholder="请输入金额" @input="gridIndex=null"/>
        </view>
      </view>
      <view class="mt-4">
        <view class="title">优惠充值</view>
        <view class="grid grid-cols-2 gap-4 mt-2">
          <view
              class="border-1 border-solid border-#999999 rounded p-2 text-center"
              :class="index == gridIndex?'bg':''"
              :style="{ color: index == gridIndex?'white':''}"
              v-for="(item, index) in payList"
              @click="choosePay(item,index)"
          >
            <view style="font-size: 40rpx">{{ item.value }}元</view>
             <view class="mt-2" style="font-size: 30rpx">{{item.text}}</view>
          </view>
        </view>
      </view>
      <view class="mt-4">
        <view class="title">优惠须知</view>
        <view class=" text-gray" style="font-size: 20rpx;">
          <view style="margin-top: 19rpx">1.充值的余额可以用于购买华东共享会所联盟平台在售商品；</view>
          <view style="margin-top: 19rpx">2.充值的余额不会过期，但不可转赠他人；</view>
          <view style="margin-top: 19rpx">3.使用充值余额消费或购买会员卡可获得积分；</view>
          <view style="margin-top: 19rpx">
            4.充值前请您仔细阅读
            <text class="underline underline-offset-1 " style="color: #0084FF;text-decoration-color:#0084FF ">
              《用户协议》
            </text>
            ，成功充值即代表您对本协议并无异议。
          </view>
          <view style="margin-top: 19rpx">
            5.如您需要充值余额退款服务，请点击
            <text
                @click="refundShow = true"
                class="underline underline-offset-1 "
                style="color: #0084FF;text-decoration-color:#0084FF "
            >
              申请余额退款,
            </text>
            工作人员审核通过后余额 将原路退回您的账户。
          </view>
        </view>
      </view>
      <view class="sticky bottom-0 w-full bg-white p-2">
        <view class="safeButton" >
          <u-button type="primary" hover-class="none" shape="circle"
                    :custom-style="{ background: theme.bgColor, color: theme.color,display:'block',width:'400rpx'}" @click="submit">立即充值
          </u-button>
        </view>
      </view>
    </view>
    <u-popup v-model="refundShow" mode="center" width="600rpx" :border-radius="16">
      <view class="p-4">
        <view class="text-center" style="font-size: 36rpx;font-weight: bold;margin-bottom: 57rpx">退款说明</view>
        <scroll-view scroll-y="true" class="h-400rpx text-xs">
          <view>
            1.会员充值余额退款时，仅支持退支付本金部分，优 惠或赠额部分不支持退款。例如您充值500元赠送50
            元券，余额充值退款时仅可
          </view>
          <view class="mt-2">
            2.若充值时赠送了优惠券，退款后优惠券将自动失效，
            不可继续使用；如优惠券已使用成功，将从退款本金 内全额扣减优惠券价值金额，
          </view>
          <view class="mt-2">3.余额退款仅支持退款至原购买人账户。</view>
          <view class="mt-2">
            4.余额购买的会员卡金额不可退款，如需退款，请购 卡人到【我的】-【联系客服】咨询。
          </view>
        </scroll-view>
        <u-button :custom-style="{ background: theme.bgColor, color: theme.color,marginTop:'16rpx' }"
                  @click="goPage('/pages_sub/balance/refund')">
          我知道了，继续申请退款
        </u-button>
        <u-button :custom-style="{marginTop:'16rpx' }" type="info" plain>我再想想，暂不退款</u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { loginfunc } from '@/common/fa.mixin.js';
export default {
  mixins: [loginfunc],
  data() {
    return {
      price: '',
      gridIndex: null,
      refundShow: false,
      active: {},
      payList: [

      ]
    }
  },
  onLoad() {
    this.getmoneyCzsellist()
  },

  methods: {
    getUserIndex: async function () {
      let res = await this.$api.getUserIndex();
      if (res.code == 1) {
        this.$u.vuex('vuex_user', res.data.userInfo || {});
      } else {
        this.$u.toast(res.msg);
      }
    },
    getmoneyCzsellist() {
      this.$api.moneyCzsellist({}).then(res => {
        if (res.code == 1) {
          this.payList=res.data
        } else {
          this.$u.toast(res.msg);
        }
      });
    },
    choosePay(item, index) {
      this.gridIndex = index
      this.price = item.value
    },
    async submit() {
      let res = await this.$api.payCom({
        price: this.price,
        paytype: "wechat",
        openid: this.vuex_openid || "",
        //获取微信登录的code，用于换openid
        logincode: await this.getMpCode(),
        method: 'miniapp'
      });
      if (!res.code) {
        this.$u.toast(res.msg);
        return;
      }
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: res.data.signType,
        paySign: res.data.paySign,
        success: rest => {
          this.$api.MemberRecharge({
            price: this.price,
            payordersn:res.data.payordersn
          }).then(res2 => {
            if (res2.code == 1) {
              this.$u.toast('充值成功');
              this.getUserIndex()
            } else {
              this.$u.toast(res2.msg);
            }
          });
          this.getUserIndex()
        },
        fail: err => {
          this.$u.toast('fail:' + JSON.stringify(err));
        }
      });


    }
  }
}
</script>

<style lang="scss">
.title {
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 60rpx;
}
.bg{
  background-image: linear-gradient(to bottom, #5944ec, #08b8fd);
}
</style>
